import { getCompanyList, addCompany } from "../../api/company"
import React, { useEffect, useState, useRef } from "react"
import  Qfpage from '../../components/Qfpage'
import { Table ,Button,Modal , Form , Input, Radio ,Cascader, message} from 'antd'
import dayjs from 'dayjs'
import  styles from './style.module.scss'
import { regionData } from 'element-china-area-data';
const  Company = ()=>{

    const getList = async ()=>{
        const res = await getCompanyList({});
        console.log('res',res);
        setList(res.data.data); // 修改list等于请求之后返回的数组
    }

    useEffect(()=>{
        getList()
    },[])


    // 数据源
    const [list,setList] = useState([]) 

    
    // 表格的列的定义
    const columns = [
        { 
            title: 'id', // 表头的名称
            dataIndex:'id',
            align:'center'
        },
        {
            title:'公司名称',
            dataIndex:'name',
           
        },
        {
            title:'vue',
            dataIndex: 'isVue',
            width:50,
            render( _ ,record){
                // render 第一个参数是 当前行的当前列的内容
                // 第二个是完整的当前行的所有的内容  一般第二个参数比较有用因为我们的数据有可能用的不仅仅是当前列的可能还要其他的内容
                // 所以很多项目习惯性的值拿第二个参数来进行使用 所以也自然而然的习惯了把第一个参数 命名为 _ 意思是我不用你 但是不能忽略你
                // 所以只能写一个最简单的的变量而且很容易忽略
                // 通过一个函数返回的内容来进行渲染
                if(record.isVue ==1) return '是'
                return '否'
             
            }

        },
        {
            title:'React',
            dataIndex: 'isReact',
            width:50,
            render(_,record){
                if(record.isReact ==1) return '是'
                return '否'
            }

        },
        {
            title:'添加时间',
            dataIndex:'createdAt',
            render(_,record){
                return dayjs(record.createdAt).format('YYYY-MM-DD HH:mm')
            }
        },
        {
            title:'操作',
            render(){
                return (
                    <> 
                        <Button danger style={{marginRight:'8px'}}> 删除 </Button>
                        <Button> 编辑 </Button>
                    </>
                )
            }
        }
    ] 

    // 模态框是否可见的状态
    const [showAddBox, setShowAddBox] = useState(false)

    // 创建出一个ref对象 目的是为了后期能得到一个Form的表单实例
    const formRef = useRef(null);  

    const handleOk = async ()=>{
        // 期望是在这个函数内可以得到 modal当中的表单的内容
        // Form上面 绑定了 ref属性等于 formRef
        // 所以可以通过 formRef.current来得到表单实例
        const newData = formRef.current.getFieldsValue()
        
        // 发起请求 添加公司
        let res = await addCompany({...newData,areaid: newData.areaid.join()})
        console.log('添加的结果是',res)
        const { statusText }  = res;
        if(statusText === 'Created'){
            message.success('创建成功')
            getList(); // 重新获取公司列表
            setShowAddBox(false); // 添加成功关闭弹窗
        } else {
            // 添加失败的话要提醒用户失败
            message.warning('添加失败')
        }

       
     }



    const handleCancel = ()=>{ setShowAddBox(false) }


    // 地区联级选择器
    const options = regionData
    

    return (
        <Qfpage  title="公司管理">
            <div className={ styles.actionzone }>
                <Button onClick={ ()=>{ setShowAddBox(true)   }  }> 添加一个新的公司 </Button>
            </div>
            <Table rowKey="id" dataSource={list} columns={columns}  />
            {/* 添加操作的模态框 */}
            <Modal 
                title="添加一个公司" 
                open={ showAddBox }
                onOk={ handleOk }
                onCancel={ handleCancel }
                okText={'添加'}
                width={650}
                cancelText={ '取消'}
              
             >
                {/* 添加表单 */}
                <Form
                    ref={formRef} 
                    labelCol={ { col:10,span:5} }
                    onFinish={ ( res)=>{  console.log('onFinish得到的参数', res)} }
                >

                    <Form.Item  name="name" label="公司名称">
                        <Input placeholder="请填写公司的名称" />
                    </Form.Item>
                    <Form.Item name="areaid" label="公司所在地">
                    <Cascader options={options}  />
                    </Form.Item>
                    <Form.Item  name="isVue" label="是否使用vue">
                        <Radio.Group
                                options={ [ { label: '是', value: 1 },
                                            { label: '否', value: 0 },
                                         ]}
                                value={0}
                                optionType="button"
                                buttonStyle="solid"
                        />
                    </Form.Item>
                    <Form.Item name="isReact" label="是否使用react">
                        <Radio.Group
                                options={ [ { label: '是', value: 1 },
                                            { label: '否', value: 0 },
                                         ]}
                                value={0}
                                optionType="button"
                                buttonStyle="solid"
                        />
                    </Form.Item>
                    <Form.Item name="skil" label="使用的其他技术">
                        <Input />
                    </Form.Item>
                    <Form.Item name="desc" label="公司简介">
                        <Input />
                    </Form.Item>
                    <Button type="primary" htmlType="submit"> 提交 </Button>
                </Form>

             </Modal>
        </Qfpage> 
    )
}


export default Company